<template>
  <div id="app" style="overflow: hidden">
    <!--    搜索-->   <!--    搜索-->   <!--    搜索-->   <!--    搜索-->
    <div class="flex" style="justify-content: space-between;position: relative">
      <div class="flex" style="margin-right: 20px">
        <div class="search">公司名称：
          <el-input v-model="params.companyName" placeholder="请输入公司名称" clearable style="width:200px" size="small"
                    prefix-icon="el-icon-search">
          </el-input>
        </div>
        <div class="search">品牌：
          <el-select size="small" v-model="params.brandPartyId" filterable>
            <el-option v-for="item in brandList" :value="item.id" :label="item.brandPartyName"
                       :key="item.id"></el-option>
          </el-select>
        </div>
        <div>
          <el-button type="primary" size="small" style="margin-left:10px;" @click="getCompanyList"
                     icon="el-icon-search">查询
          </el-button>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 10px">
      <el-button type="primary" size="small" @click="addCompany" v-if="authorityList.includes(302)"><i
          class="el-icon-plus"
          style="margin-right: 5px"></i>新增
      </el-button>
    </div>
    <!--    表格--> <!--    表格--> <!--    表格--> <!--    表格-->
    <el-table :data="companyData"
              height="calc(100vh - 280px)"
              border stripe :cell-style="{ 'textAlign': 'center' }"
              :header-cell-style="{  'fontSize': '14px', 'background-color': '#F3F6FD', 'color': '#333333', 'textAlign': 'center' }">
      <el-table-column type="index" width="50" label="序号"></el-table-column>
      <el-table-column prop="companyName" label="公司名称" width="200px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="companyAddress" label="公司地址" width="200px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="companyTypeNameStr" label="公司类型" width="200px" show-overflow-tooltip></el-table-column>
      <el-table-column label="营业执照">
        <template slot-scope="scope">
          <el-image v-for='(v, i) in scope.row.licenseUrl' :key="i" style="width: 50px; height: 50px"
                    ref="preview" :src="'https://'+v" :preview-src-list="['https://'+v]">
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="personName" label="姓名"></el-table-column>
      <el-table-column prop="companyPhone" label="电话"></el-table-column>
      <el-table-column prop="exigencyPhone" label="紧急联系电话"></el-table-column>
      <el-table-column prop="updateTime" label="创建时间"></el-table-column>
      <el-table-column label="操作" width="200px">
        <template slot-scope="scope">
          <el-link style="color: #303e9d;margin-left: 10px" @click="bindingUser(scope.row)"
                   v-if="authorityList.includes(303)">邀请经理
          </el-link>
          <el-link style="color: #303e9d;margin-left: 10px" @click="checkUser(scope.row)"
                   v-if="authorityList.includes(304)">查看公司人员
          </el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination style="padding: 20px 0;" align="center" @size-change="handleSizeChange"
                   @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[20, 30, 40, 50]"
                   layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
    </el-pagination>

    <!--    邀请公司项目经理-->
    <el-dialog
        :visible.sync="masterDialog" title="邀请项目经理"
        width="30%"
        center
        :show-close="true"
        :before-close="masterClose"
    >
      <div style="display: flex;align-items: center">
        <span style="width: 80px;">姓名：</span>
        <el-input v-model="masterForm.userName" placeholder="请填写项目经理姓名" size="small"></el-input>
      </div>
      <span style="color: red;font-size: 12px">*将自动创建为登录账号</span>
      <div style="display: flex;align-items: center;margin-top: 20px">
        <span style="width: 80px;">电话：</span>
        <el-input v-model="masterForm.phoneNum" placeholder="请填写项目经理电话" size="small"></el-input>
      </div>
      <span style="color: red;font-size: 12px">*将自动创建为登录密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitMaster">确 定</el-button>
    </span>

    </el-dialog>
    <!--    查看公司组成人员-->
    <check-company-user ref="idData"></check-company-user>
    <!--    新增公司信息-->
    <add-company @addStatus="receiveMessage" ref="addCompanyRef"></add-company>
  </div>
</template>
<script>
import addCompany from "./componentDialog/addCompany.vue";
import checkCompanyUser from "./componentDialog/checkCompanyUser.vue";
import quinn from "../../utils/quinn";
import store from "../../store";

export default {
  name: "companyList",
  components: {
    addCompany,
    checkCompanyUser
  },
  data() {
    return {
      params: {
        companyName: "",
        pageSize: 20,
        pageNumber: 1,
        brandPartyId: "",
      },
      userData: [],
      totalCount: 0,
      brandList: [],
      currentPage: 1,
      masterForm: {},
      companyData: [],
      authorityList: [],
      addCompanyDialog: false,
      userDialog: false,
      masterDialog: false,
      host: this.$imgHost,
    }
  },
  created() {
    this.getBrand()
    const {authorityList = []} = quinn.getStorage("userDatav3") || store.state.userData || {};
    this.authorityList = authorityList
  },
  methods: {
    getBrand() {
      this.$api.storeGetBrandPartyList().then(res => {
        this.brandList = res
        this.params.brandPartyId = res[0].id
        this.getCompanyList()
      })
    },
    addCompany() {
      this.$refs.addCompanyRef.handleOpen(this.params.brandPartyId)
    },
    getCompanyList() {
      const params = this.params
      this.$api.companyGetCompanyList(params).then(res => {
        this.companyData = res.data
        this.totalCount = res.total
      })
    },
    bindingUser(row) {
      this.masterDialog = true
      this.companyId = row.companyId
    },
    handleClose() {
      this.addCompanyDialog = false
    },
    receiveMessage(data) {
      if (data == 1) {
        this.addCompanyDialog = false
        this.getCompanyList()
      }
    },
    masterClose() {
      this.masterDialog = false
    },
    submitMaster() {
      const data = {
        ...this.masterForm,
        companyId: this.companyId
      }
      this.$api.companyAddUserCompanyInfo(data).then(res => {
        if (res == 1) {
          this.masterDialog = false
          this.getCompanyList()
          this.$message.success("绑定成功！")
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getCompanyList()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getCompanyList()
    },
    checkUser(row) {
      this.$refs.idData.handleOpen(row)
    },
    userClose() {
      this.userDialog = false
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../assets/css/public.css";
</style>